<template>
    <div class="upload-hd">
        <template v-if="images">
            <div class="imgs mr-10" v-for="(item, index) in images.split(';')" :key="index">
                <van-image @click="preview(index)" :key="index" width="60" height="60" :src="baseUrl + item" />
                <div class="delImg" @click="delImg(index)">
                    <img src="@/assets/Images/AppIcon//icon_cancel.png" />
                </div>
            </div>
        </template>
        <van-uploader v-if="!images || images.split(';').length < count" @oversize="onOversize" :after-read="afterRead">
            <img class="upload-img" src="@/assets/Images/AppIcon/upload_picture.png" alt="" />
        </van-uploader>
    </div>
</template>
<script>
import { upload } from "@/api/common";
import { ImagePreview } from "vant";
export default {
    components: { ImagePreview },
    props: {
        images: {},
        cnt: {},
    },
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            count: 3,
        };
    },
    created() {
        if (this.cnt && this.cnt > 0) {
            this.count = this.cnt;
        }
    },
    methods: {
        afterRead(file) {
            let params = new FormData(); //创建form对象
            params.append("file", file.file);
            upload(params)
                .then((res) => {
                    let array = this.images ? this.images.split(";") : [];
                    res.data.forEach((item) => {
                        array.push(item.FilePath);
                    });
                    this.$emit("update:images", array.join(";"));
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },
        onOversize(file) {
            Toast("文件大小不能超过 2M");
        },
        // 删除图片
        delImg(index) {
            const _this = this;
            _this.$dialog
                .confirm({
                    title: "询问",
                    message: "确定要删除此照片吗？",
                })
                .then(() => {
                    let array = this.images.split(";") || [];
                    array.splice(index, 1);
                    _this.$emit("update:images", array.join(";"));
                })
                .catch(() => {
                    // on cancel
                });
        },
        preview(index) {
            let arry = [];
            this.images.split(";").map((item, index) => {
                arry.push(this.baseUrl + item);
            });
            ImagePreview({
                images: arry,
                startPosition: index,
            });
        },
    },
};
</script>
<style lang="less" scoped>
.upload-hd {
    display: flex;
    .upload-img,
    .imgs {
        position: relative;
        width: 60px;
        height: 60px;
    }
    .delImg {
        position: absolute;
        top: -5px;
        right: -5px;
        width: 16px;
        height: 16px;
        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
